// src/components/popups/userActions/Logout.tsx

import type { FC } from 'react';
import type { LogoutProps } from '@/types/types';
import { IoLogOutOutline } from 'react-icons/io5';

const Logout: FC<LogoutProps> = ({ onConfirm, onCancel }) => (
  <div
    className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/60 dark:bg-black/80 backdrop-blur-sm p-1 sm:p-6 font-poppins"
    onClick={onCancel}
  >
    <div
      className="relative w-full max-w-xs sm:max-w-md w-[90%] max-h-[60vh] overflow-y-auto bg-white dark:bg-slate-900 rounded-3xl shadow-2xl dark:shadow-blue-900 border border-gray-200 dark:border-slate-800 animate-fade-in-up transition-all duration-300"
      onClick={e => e.stopPropagation()}
    >
      {/* Header */}
      <div className="relative bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-800 px-4 py-4 flex justify-center items-center gap-3 rounded-t-3xl shadow-sm">
        <div className="bg-blue-600 dark:bg-cyan-700 p-2 rounded-xl shadow">
          <IoLogOutOutline size={32} className="text-white" />
        </div>
        <h2 className="text-lg sm:text-2xl font-extrabold text-blue-700 dark:text-cyan-300">Logout</h2>
      </div>
      {/* Body */}
      <div className="px-2 sm:px-6 py-5 sm:py-6 text-center text-gray-800 dark:text-gray-100 text-xs sm:text-base space-y-5">
        <p className="text-gray-700 dark:text-cyan-200">Are you sure you want to log out?</p>
        {/* Buttons */}
        <div className="flex flex-col sm:flex-row justify-center gap-4 pt-2">
          <button
            onClick={onCancel}
            className="w-full sm:w-auto px-3 py-2.5 rounded-xl text-gray-600 dark:text-gray-200 hover:text-black dark:hover:text-cyan-300 border border-gray-300 dark:border-slate-700 bg-white dark:bg-slate-800 font-semibold text-xs sm:text-base transition"
          >
            Cancel
          </button>
          <button
            onClick={onConfirm}
            className="w-full sm:w-auto px-3 py-2.5 rounded-xl bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 text-white font-semibold text-xs sm:text-base shadow transition"
          >
            Logout
          </button>
        </div>
      </div>
    </div>
  </div>
);

export default Logout;